<template>
  <com-card>
    <div slot="com_title">
      <el-form :model="searchObj" size="small" :inline="true">
        <el-form-item label="订单号">
          <el-input type="text" v-model="searchObj.orderNo"></el-input>
        </el-form-item>
        <el-form-item label="收货人">
          <el-input type="text" v-model="searchObj.consignee"></el-input>
        </el-form-item>
        <el-form-item label="电话号码">
          <el-input type="text" v-model="searchObj.phone"></el-input>
        </el-form-item>
        <el-form-item label="订单状态">
          <el-select v-model="searchObj.orderState">
            <el-option value="派送中" label="派送中"></el-option>
            <el-option value="已受理" label="已受理"></el-option>
            <el-option value="已完成" label="已完成"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="时间">
          <el-date-picker
            v-model="searchObj.odate"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="query()">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div slot="com_content">
      <el-table :data="dataSource">
        <el-table-column
          prop="orderNo"
          label="订单号"
          fixed="left"
        ></el-table-column>
        <el-table-column label="下单时间">
          <template #default="{ row }">
            {{ row.orderTime | timeMF }}
          </template>
        </el-table-column>
        <el-table-column prop="phone" label="手机号"></el-table-column>
        <el-table-column prop="consignee" label="收货人"></el-table-column>
        <el-table-column
          prop="deliverAddress"
          label="配送地址"
        ></el-table-column>
        <el-table-column label="送达时间">
          <template #default="{ row }">
            {{ row.deliveryTime | timeMF }}
          </template>
        </el-table-column>
        <el-table-column prop="remarks" label="用户备注"></el-table-column>
        <el-table-column prop="orderAmount" label="订单金额"></el-table-column>
        <el-table-column prop="orderState" label="订单状态"></el-table-column>
        <el-table-column label="操作" fixed="right">
          <template #default="{ row }">
            <el-button type="text" @click="gundp(row.id)">修改</el-button>
            <el-button type="text" @click="gofn(row.id)">查看</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="searchObj.currentPage"
        :page-sizes="[2, 4, 6, 8]"
        :page-size="searchObj.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
  </com-card>
</template>

<script>
import ComCard from "../../components/comcard";
import { api_list } from "../../api/order";
import moment from "moment";
export default {
  components: {
    ComCard,
  },

  filters: {
    timeMF(val) {
      if (val == "0000-00-00 00:00:00") {
        return "时间不正确";
      } else {
        return moment(val).format("YYYY-MM-DD hh:mm:ss");
      }
    },
  },

  data() {
    return {
      dataSource: [],
      total: 0,
      searchObj: {
        currentPage: 1,
        pageSize: 2,
        orderNo: "",
        consignee: "",
        phone: "",
        orderState: "",
        odate: [],
        date: [],
      },
    };
  },
  mounted() {
    this.query();
  },
  methods: {
  //修改
    gundp(id) {
      this.$router.push({
        path: "/order/update",
        query: { id },
      })
      },
      //查看
      gofn(id){
        this.$router.push({
          path:`/order/detail?id=${id}`,
         query:{id}
        })
      },
  
    handleSizeChange(val) {
      this.searchObj.pageSize = val;
      this.query();
    },
    handleCurrentChange(val) {
      this.searchObj.currentPage = val;
      this.query();
    },
    async query() {
      this.searchObj.date = JSON.stringify(this.searchObj.odate);
      let rst = await api_list(this.searchObj);
      let { total, data } = rst;
      this.total = total;
      this.dataSource = data;
    },
  },
};
</script>

<style lang="less" scoped>
</style>